<%@ include file="../common/IncludeTop.jsp"%>

<script>
	$(function () {
		$(".quantity").on('blur', function () {
			var r = confirm("Whether to save your changes or not?");
			if (r === true) {
				var node = this;
				$.ajax({
					type    : "GET",
					url     : "updateCartQuantities?" + this.name + "=" + this.value,
					success : function (data) {

						//取出商品的单价
						var node1 = node.parentElement.nextElementSibling.firstChild.nodeValue.slice(9);
						//计算总价
						var totalNum = (returnFloat(node1 * node.value)).toString();

						//重新操作DOM树赋值
						var total = node.parentElement.nextElementSibling.nextElementSibling;

						total.innerHTML = "$" + totalNum;


						var subtotal = 0;
						var totalList = $('.total');
						for (var i = 0; i < totalList.length; i++) {
							var cur = totalList[i].firstChild.nodeValue;
							//对字符串进行裁剪，提取出其中的数字部分
							if (cur.length >= 9) {
								cur = cur.slice(9);
							} else {
								cur = cur.slice(1);
							}
							subtotal += parseFloat(cur);
						}
						console.log(subtotal);
						console.log($('#subTotal'));
						// $('#subTotal').parentNode.innerHTML = "$" + subtotal;
						$('#subTotal').text("Sub Total: $" + returnFloat(subtotal));
					}
				});
			} else {
				//刷新页面
				window.location.reload();
			}
		});


		function returnFloat(value){
			var value=Math.round(parseFloat(value)*100)/100;
			var xsd=value.toString().split(".");
			if(xsd.length==1){
				value=value.toString()+".00";
				return value;
			}
			if(xsd.length>1){
				if(xsd[1].length<2){
					value=value.toString()+"0";
				}
				return value;
			}
		}
	});
</script>


<div id="BackLink">
	<a href="main">Return to Main Menu</a>
</div>

<div id="Catalog">
	<%--	<div id="Cart">--%>
	<div>
		<h2 class="titleshopcart">Shopping Cart</h2>
		<form action="updateCartQuantities" method="post">
			<table class="imagetable">
				<tr>
					<th><b>Item ID</b></th>
					<th><b>Product ID</b></th>
					<th><b>Description</b></th>
					<th><b>In Stock?</b></th>
					<th><b>Quantity</b></th>
					<th><b>List Price</b></th>
					<th><b>Total Cost</b></th>
					<th>&nbsp;</th>
				</tr>

				<c:if test="${sessionScope.cart.numberOfItems == 0}">
					<tr>
						<td colspan="8"><b>Your cart is empty.</b></td>
					</tr>
				</c:if>

				<c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
					<tr>
						<td>
							<a href="viewItem?itemId=${cartItem.item.itemId}">${cartItem.item.itemId}</a>
						</td>
						<td>
								${cartItem.item.product.productId}
						</td>
						<td>
								${cartItem.item.attribute1} ${cartItem.item.attribute2}
								${cartItem.item.attribute3} ${cartItem.item.attribute4}
								${cartItem.item.attribute5} ${cartItem.item.product.name}
						</td>
						<td>
								${cartItem.inStock}
						</td>
						<td>
							<input class="quantity" type="text" name="${cartItem.item.itemId}" value="${cartItem.quantity}" />
						</td>
						<td>
							<fmt:formatNumber value="${cartItem.item.listPrice}" pattern="$#,##0.00" />
						</td>
						<td class="total" id="${cartItem.item.itemId}">
							<fmt:formatNumber value="${cartItem.total}" pattern="$#,##0.00" />
						</td>
						<td>
							<a href="removeItemFromCart?workingItemId=${cartItem.item.itemId}" class="Button">Remove</a>
						</td>
					</tr>
				</c:forEach>
				<tr>
					<td colspan="7">
						<span id="subTotal">
						Sub Total:

						<fmt:formatNumber
								value="${sessionScope.cart.subTotal}" pattern="$#,##0.00" />
						</span>
					</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</form>

		<c:if test="${sessionScope.cart.numberOfItems > 0}">
			<a href="newOrderForm" class="Button">Proceed to Checkout</a>
		</c:if>
	</div>

	<div id="Separator">&nbsp;</div>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>